<!-- 获客渠道 -->
<script setup lang="ts">
import type { UnwrapRef } from 'vue'
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { apiListSetupDefined, apiUpdateSetupDefined } from '~/api/resource/setupDefined'
import type { SetupDefinedList, SetupDefinedQuery, SetupDefinedVO } from '~/api/resource/setupDefined/types.ts'

const modalFormRef = ref()
const modalList = shallowRef<SetupDefinedVO[]>([])
const listEdit = ref([])
const displayName = ref()
const setupDefined = ref<SetupDefinedVO>()

const modalForm: UnwrapRef<SetupDefinedList> = reactive<SetupDefinedList>({
  setupDefinedVOs: [],
})

const queryForm: SetupDefinedQuery = reactive({
  pageNum: 1,
  pageSize: -1,
  type: 2,
})

function changeDisplayFlag(index?: number) {
  setupDefined.value = modalForm.setupDefinedVOs[index]
  setupDefined.value.displayFlag = setupDefined.value.displayFlag ? 1 : 0
  if (setupDefined.value.displayName.toString() === '自定义' || setupDefined.value.displayName === '') {
    message.error('请修改选项名称后再启用!')
    modalForm.setupDefinedVOs[index].displayFlag = false
  }
  else {
    apiUpdateSetupDefined(setupDefined.value).then((res) => {
      console.log('res', res)
      if (res.code === 200)
        message.success('操作成功')
      getListLabel()
    })
  }
}

function showEditName(index?: number) {
  listEdit.value[index] = true

  displayName.value = Object.assign(modalList.value[index].displayName)
  if (modalList.value[index].displayName === '自定义')
    modalList.value[index].displayName = ' '
  console.log('listEdit', listEdit.value)
}

function submitEditName(index?: number) {
  if (modalList.value[index].displayName.trim() === '') {
    modalForm.setupDefinedVOs[index].displayName = ''
  }
  else {
    changeDisplayFlag(index)
    listEdit.value[index] = false
  }
}

function cancelEditName(index?: number) {
  modalForm.setupDefinedVOs[index].displayName = displayName.value
  listEdit.value[index] = false
}

async function getListLabel() {
  await apiListSetupDefined(queryForm).then((res) => {
    if (res.code === 200)
      modalList.value = res.data.records ?? []
    modalForm.setupDefinedVOs = []
    modalList.value.forEach((data) => {
      listEdit.value.push(false)
      modalForm.setupDefinedVOs.push(data)
    })
  })
}

const chnNumChar = ['一', '二', '三', '四', '五', '六', '七', '八', '九']
const chnUnitChar = ['', '十', '百', '千']
function SectionToChinese(index?: number) {
  index = Number.parseInt(index) + 1
  if (index === 10)
    return chnUnitChar[1]
  else if (index > 10 && index < 20)
    return chnUnitChar[1] + chnNumChar[index - 10]
  else
    return chnNumChar[index - 1]
}

onMounted(() => {
  getListLabel()
})
</script>

<template>
  <div class="bh-table-page ">
    <div class="label-div">
      <div class="w-full flex justify-start mt-30px mb-5px">
        <div class="bh-item-title">
          <bh-title-bar :font-size="14">
            获客渠道
          </bh-title-bar>
        </div>
      </div>

      <div class="label-table-div">
        <a-form
          ref="modalFormRef" :model="modalForm" layout="vertical"
          :hide-required-mark="true"
        >
          <template v-for="(item, index) in modalForm.setupDefinedVOs" :key="index">
            <a-row>
              <a-col style="display: flex;align-items: center;height: 28px" :span="3" :class="item.displayFlag ? 'enable-check-active' : 'enable-check' ">
                <span>选项</span><span v-text="SectionToChinese(item.displayIndex)" />
              </a-col>
              <a-col style="display: flex;align-items: center;height: 28px" :span="9" :class="item.displayFlag ? 'enable-check-active' : 'enable-check' ">
                <a-form-item
                  v-if="listEdit[index]" :name=" `setupDefinedVOs.${index}.displayName` "
                  :class="modalForm.setupDefinedVOs[index].displayName === '' ? 'my-error-input' : ''"
                >
                  <div class="flex flex-center">
                    <a-input v-model:value="item.displayName" style="width: 140px;" />
                    <span v-if="modalForm.setupDefinedVOs[index].displayName === '' " class="error-tip">不能为空</span>
                  </div>
                </a-form-item>
                <span v-else>{{ item.displayName }}</span>
              </a-col>
              <a-col style="display: flex;align-items: center;height: 28px" :span="3">
                <bh-icon v-if="!listEdit[index]" class="mb-4px" name="icon-bianji" :style="{ cursor: 'pointer', fontSize: '15px' }" @click="showEditName(index)" />
                <bh-icon v-if="listEdit[index]" class="mb-4px" name="icon-queding" :style="{ cursor: 'pointer', fontSize: '15px' }" @click="submitEditName(index)" />
                <bh-icon v-if="listEdit[index]" class="ml-10px mb-4px" name="icon-quxiao" :style="{ cursor: 'pointer', fontSize: '15px' }" @click="cancelEditName(index)" />
              </a-col>
              <a-col style="display: flex;align-items: center;height: 28px" :span="8">
                <a-checkbox v-model:checked="item.displayFlag" @change="changeDisplayFlag(index)">
                  <span :class="item.displayFlag ? 'enable-check-active' : 'enable-check' ">启用</span>
                </a-checkbox>
              </a-col>
            </a-row>
          </template>
        </a-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.bh-table-page {
  @import "@/assets/styles/bh-modal";
  @import "@/assets/styles/bh-drawer";

  background-color: var(--bg-color);
  padding: 6px;
  border-radius: var(--bh-border-radius-large);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .label-div{
    width: 800px;
    display: flex;
    flex-direction: column;
  }

  .setting-center-top{
    margin-top: 30px;
    height: 230px;

    background: #FCFCFC;
    border-radius: 8px;
    padding: 30px 50px;
  }

  .setting-center-top-label{
    font-size: 14px;
    color: var(--bh-color-3);
    font-weight: 500;
  }

  .setting-center-top-value-active{
    font-size: 12px;
    color: var(--bh-color-3);
    font-weight: 500;
  }

  .setting-center-top-value{
    font-size: 12px;
    color: var(--bh-color-9);
    font-weight: 500;
  }

  .my-line-under{
    border-top: 1px solid rgba(245,245,245,1);
  }

  .label-table-div{
    background: var(--bh-color-fc);
    border-radius: 8px;
    width: 100%;
    padding: 41px 50px;
    margin-bottom: 30px;
  }

  .enable-check{
    font-size: 12px;
    color: var(--bh-color-9);
    font-weight: 500;
  }
  .enable-check-active{
    font-size: 12px;
    color: var(--bh-color-3);
    font-weight: 500;
  }
  .error-tip{
    margin-left: 10px;
    color: var(--bh-color-form-required_mark);
  }

  .my-error-input .ant-input{
    border: 1px solid red !important;
  }

}

.ant-form-item{
  margin-bottom: 0 !important;
}
</style>
